<template>
  <div id="max">

    <div id="max1">
      <div id="left">
        <div class="left-t">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="el-icon-s-platform">活动中心</span>
            </div>
            <div v-for="o in hb" :key="o" class="text item">
             <a onclick="dj(id)">  {{o }}</a>
            </div>
          </el-card>
        </div>
        <div class="left-z">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="el-icon-s-management">课程中心</span>
            </div>
            <div v-for="o in kc" :key="o" class="text item">
              <a href="main.vue">  {{o}}</a>
            </div>
          </el-card>
        </div>
        <div class="left-z">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="el-icon-s-custom">个人资料</span>
            </div>
            <div v-for="o in gr" :key="o" class="text item">
              <a href="main.vue" onclick="">  {{ o }}</a>
            </div>
          </el-card>
        </div>
      </div>


      <div id="right">
        <div class="right-t">
          <el-tabs v-model="activeName"   @tab-click="handleClick" >
              <el-tab-pane v-for="s in sc" :label="s.name" :name="s.id">

              </el-tab-pane>

          </el-tabs>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "personal",
    data() {
      return {
        activeName:1,
        hb:[
          '我的红包'
        ],
        kc:[
          '我的课程',
          '我的收藏',
          '学习记录',
        ],
        gr:[
          '个人信息',
          '修改密码',
          '我的订单',
          '我的关注',
          '我的通知',

        ],
        sc:[
         {name:'录播课程',id:1},{name:'开源',id:2},{name:'资讯',id:3}

        ]
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }

  }
</script>

<style scoped>
  a{
    text-decoration:none;
    color: black;
  }
  span{
    font-weight: bold;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 160px;
  }







#max{

  height: 1000px;
  width: 100%;
}
  #max1{
    /*border: 1px solid blue;*/
    width: 1000px;
    margin:0 auto;
    height: 1000px;
  }
  .left-t{
    background-color: #FFFFFF;
    width: 160px;
  }
  .left-z{
    background-color: #FFFFFF;
    margin-top: 20px;
    width: 160px;
  }
  #left{
    margin-top: 40px;
    float: left;
  }
  #right{
    margin-top: 40px;
    width: 800px;
    float: right;
  }
  .right-t{
    /*border: 1px solid blue;*/
    height: 800px;
  }
  .right-b{

    /*width: 60px;*/
    height: 30px;
    margin-top: 15px;
  }
.el-tag{
  float: left;
}
</style>
